<template>
  <div class="login xd-login"> 
    XD-LOGIN
    <div class="login-con">
        <div class="form-con">
          <p class="form-title"> {{$t("xd-login.title") }}</p>
          <Form ref="loginForm" :model="formInline" :rules="ruleInline">
            <FormItem prop="userName">
              <Input v-model="formInline.userName" :placeholder='$t("xd-login.placeholderUsername")' autocomplete="off">
                <Icon :size="18" type="ios-person-outline" slot="prepend" color="#000"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="formInline.password" :placeholder='$t("xd-login.placeholderPassword")' autocomplete="new-password">
                <span slot="prepend">
                  <Icon :size="18" type="ios-lock" color="#000"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long :loading="loading">{{ $t("xd-login.loginBtn")}}</Button>
            </FormItem>
            <FormItem prop="wpbool">
              <Checkbox v-model="wpbool" @on-change="changPw">{{ $t("xd-login.loginForgetPW") }}</Checkbox>
              <div class="form-index" @click="gotoIndex">回到首页</div>
            </FormItem>
          </Form>
        </div>
    </div>
  </div>
</template>
<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import i18n from "./locale";
import loginIcon from "./images/logo-icon.png";
import {
  changeAccess,
  setSessionObjStore,
  setLocalObjStore
} from "@/libs/util";

export default {
  name: "xd-login",
  data() {
    return {
      i18n: i18n,
      loginIcon: loginIcon,
      formInline: {
        userName: "",
        password: ""
      },
      ruleInline: {
        userName: ValidatorRule.user,
        password: ValidatorRule.password
      },
      wpbool: false
    };
  },

  methods: {
    gotoIndex() {
      this.$router.push({
        name: "index",
        query: { from: "login" }
      });
    },
    /**
     *  role: ["admin"],
        token: "qwertyuioplkjgnxjidmersjkisnd",
        data: {
          userId: "400029",
          username: "test",
          //多个站点，返回用户属性不一样，这里个性化信息，上面是基础信息，特别是key需要一致
        }
     * 
     * 
     */
    handleSubmit() {
      let tthis = this;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let username = this.formInline.userName,
            password = this.formInline.password;
          if (!this.loading) {
            this.loading = true;
            API.login({ username, password })
              .then(res => {
                tthis.loading = false;
                if (res) {
                  const data = res.data;
                  this.$store.commit("setToken", data.token);
                  this.$store.commit("setRole", data.role);
                  this.$store.commit("setUserInfo", data);
                  //模拟返回访问列表
                  let menuList = this.getAccessMenuList(data.role);
                  //获取权限访问列表
                  changeAccess(menuList, this.$store);
                  this.goToNext();
                }
              })
              .catch(err => {
                console.log(err);
                tthis.loading = false;
                if (err.msg) {
                  this.$Message.error({
                    duration: 2,
                    content: err.msg
                  });
                } else {
                  this.$Message.error("登录服务内部错误");
                }
              });
          }
        }
      });
    },

    //test
    getAccessMenuList(role) {
      let list = [];
      list = [
        {
          id: 1,
          pid: 0,
          component: "xd-home-management",
          name: "首页管理",
          level: 1,
          access: ["admin"]
        },
        {
          id: 2,
          pid: 1,
          component: "xd-home",
          name: "首页",
          level: 2,
          access: ["admin"]
        },
        {
          id: 8,
          pid: 0,
          component: "xd-settle-manage",
          name: "结算管理",
          level: 1,
          access: ["admin"]
        },
        {
          id: 9,
          pid: 8,
          component: "xd-settle",
          name: "结算统计",
          level: 1,
          access: ["admin"]
        }
      ];
      return list;
    },

    goToNext() {
      this.$router.push({
        name: "xd-home"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  .login-con {
    position: absolute;
    right: 160px;
    top: 50%;
    right: 160px;
    top: 30%;
    width: 280px;
    border-radius: 5px;
    background: #1e2051;
    padding: 0 10px;
  }

  .form-con {
    padding: 0px;
  }

  .form-index {
    float: right;
    cursor: pointer;
  }

  .form-title {
    color: #fff;
    font-size: 15px;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
}
</style>
